<template>
  <el-dialog
    :visible="visible"
    title="分配角色"
    align="center"
    width="500px"
    @close="$emit('update:visible', false)"
  >
    <el-row class="dialog-header" type="flex" justify="space-between">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="(item) in roleDataList" :key="item.id" v-model="item.checked" class="checkout" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
    </el-row>
    <el-row class="dialog-footer">
      <el-button round type="warning" @click="confirm">确定</el-button>
      <el-button
        round
        type="info"
        @click="$emit('update:visible', false)"
      >取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
// 分配权限实现
// 1. 封装API
// 2. 弹出层调用角色已启用的数据的API
// 2.5 已有角色数据，渲染到弹出层
// 3. v-model绑定数据
// 4. 点击确定按钮， 调用分配权限API
// 5，响应提示， 重置表单， 渲染列表
export default {
  name: 'PermissionDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    checkoutData: {
      type: Array,
      default: () => []
    },
    roleIds: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      checkList: []
    }
  },
  computed: {
    // 通过计算属性，将父组件传递过来的checkoutData数据, 进行处理

  },
  watch: {
    visible(val) {
      if (val) {
        !val && this.$emit('update:checkoutData', [])
      }
    }
  },
  created() {
  },
  methods: {
    confirm() {
      this.$emit('confirm', this.checkList)
      this.$emit('update:visible', false)
    },
    testFunction() {
      this.checkoutData.forEach(item => {
        if (this.roleIds.includes(item.id)) {
          item.checked = true
        } else {
          item.checked = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  height: 500px;

  .dialog-header {
    width: 100%;
    margin-bottom: 10px;
    height: 300px;
  }

  .dialog-footer {
    flex-grow: 1;
    height: 100px;
    margin-top: 50px;
  }
}
</style>
